<template>
    <div ref="jmodal" class="position-absolute jmodalContent" style="z-index: 111111"
         :style="{width: jwidth+'px',top:jtop+'px',left:jleft+'px'}" v-if="visible">

        <div ref="jmodalHeader" class="flexCenterBetween text-white px-10 py-4 cursor-move" style="background: linear-gradient(90deg, rgb(49,146,217), rgba(49,146,217, 0));">
            <div >
                {{title}}
            </div>
            <a-icon type="close" class="cursor-pointer" @click="closeModal"/>
        </div>

        <div class="p-10 jmodalBody">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    import {isNumbers} from "../utils/js-utils";

    export default {
        name: "jmodal",
        props: {
            visible: {default: false}, title: {default: "modalTitle"}, top: {default: 100}, left: {default: 'center'},
            width: {default: 520}
        },
        watch: {
            visible: {
                deep: false,  // 深度监听
                handler(newVal, oldVal) {
                    console.log("jmodal,visible",newVal)
                   if(newVal){ //显示
                       this.$nextTick(()=>{
                           this.addMoveListener()
                       })
                   }else{
                       this.removeMoveListener()
                   }
                }
            }
        },
        data() {
            return {
                jwidth: this.width,
                jtop: this.top,
                jleft: 100,
                ww: window.innerWidth,
                isDialogTitle:false,
            }
        }, methods: {
            closeModal() {
                this.$emit("cancel")
            },
            addMoveListener(){
                document.addEventListener('mousedown', this.down);
                document.addEventListener('mouseup', this.up);
                document.addEventListener('click',this.defaultClose)
            },
            removeMoveListener(){
                document.removeEventListener('mousedown', this.down);
                document.removeEventListener('mouseup', this.up);
                document.removeEventListener('click',this.defaultClose)
            },
            down(e) {
                if (e.target == this.$refs.jmodalHeader) {
                    this.offsetX = e.clientX - this.$refs.jmodal.offsetLeft
                    this.offsetY = e.clientY - this.$refs.jmodal.offsetTop
                    document.addEventListener('mousemove', this.move);
                }
            }, move(e) {
                this.$refs.jmodal.style.left = (e.clientX - this.offsetX) + 'px';
                this.$refs.jmodal.style.top = (e.clientY - this.offsetY) + 'px';
            }, up(e) {
                document.removeEventListener('mousemove', this.move);
            },
            defaultClose(e){
                // e.preventDefault();
                // var x=e.clientX;
                // var y=e.clientY;
                // var root = this.$refs.root;
                // var x1 = root.offsetLeft;
                // var y1 = root.offsetTop;
                // var x2 = root.offsetLeft + root.offsetWidth;
                // var y2 = root.offsetTop+root.offsetHeight;
                // if(x<x1||y<y1||x>x2||y>y2){
                //     this.closeModal();
                // }
            }
        }, mounted() {
            // console.log('mounted')
            if(isNumbers(this.left) ){
                this.jleft = this.left;
            }
        }
    }
</script>

<style scoped>

    .jmodalContent {
        box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.4);
        /*border: 1px solid rgba(0, 0, 0, .2);*/
    }
    .jmodalContent{
        border: 1px solid #1181D1;
        background-color: rgba(6,23,52, 0.8);
    }

</style>
